<template>
  <Drawer v-model="visible"
          :title="'工程【'+projectData.name+'】下协同开发者'"
          width="450"
          transfer
          :closable="false"
          @on-cancel="cancel"
          @on-visible-change="visibleChange"
          :styles="$PnUtil.buildDrawerStyleByHasFooter()">

    <Card>
      <p slot="title">协同开发者名单</p>
      <div style="padding: 5px;">
        <Tag color="primary"
             :closable="projectData.user_id == currentUser.id"
             v-for="(developer, index) in developers"
             :name="developer.user_id"
             :key="index" @on-close="tagCloseHandler">{{developer.user_username}}</Tag>
        <p v-show="developers.length == 0" style="text-align: center; font-size: 12px;">无协同开发者</p>
      </div>
    </Card>
    <div class="m-b-10px"></div>

    <div v-if="projectData.user_id == currentUser.id">
      <div style="float: right">
        <Form ref="searchForm" :model="searchFormData" :rules="ruleSearchForm" @submit.native.prevent="searchUser" inline>
          <FormItem prop="username">
            <Input type="text" v-model="searchFormData.username" placeholder="输入用户名搜索"/>
          </FormItem>
          <FormItem>
            <Button type="primary" class="m-r-5px" @click="searchUser"><Icon type="md-search" /> 搜索</Button>
            <Button type="primary" @click="clearSearchForm">清空</Button>
          </FormItem>
        </Form>
      </div>
      <div class="clearfix"></div>
      <Table ref="userTable" :columns="columns" :data="tableData" height="500"></Table>
      <div class="m-b-10px"></div>
      <Button type="primary" @click="addDeveloper"><Icon type="md-add" /> 加入协同开发者</Button>
    </div>
  </Drawer>
</template>

<script>
  export default {
    name: "ProjectDeveloperList",
    props: {
      show: Boolean
    },
    data() {
      return {
        visible: this.show,
        currentUser: JSON.parse(localStorage.getItem('current_user')),
        projectData: {}, // 项目信息
        developers: [], // 协同开发者名单

        searchFormData: {
          username: ''
        },
        ruleSearchForm: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ]
        },
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '用户名',
            key: 'username'
          }
        ],
        tableData: []
      }
    },
    mounted() {

    },
    methods: {
      loadDevelopers (project_id) {
        this.$PnApi.ProjectApi.getProjectDevelopers(project_id).then(result => {
          this.developers = result.data.payload
        })
      },

      init (project_id) {
        this.$PnApi.ProjectApi.getProjectById(project_id).then(result => {
          this.projectData = result.data.payload;
        })
        this.loadDevelopers(project_id);
      },

      searchUser () {
        this.$refs['searchForm'].validate((valid) => {
          if (valid) {
            this.$PnApi.UserApi.findUsersByUsername(this.searchFormData.username).then(result => {
              this.tableData = result.data.payload
            })
          } else {

          }
        })
      },

      clearSearchForm () {
        this.tableData = [];
        this.$refs['searchForm'].resetFields()
      },

      tagCloseHandler (event, user_id) {
        this.$Modal.confirm({
          title: '提醒',
          content: '确定删除此协同开发者吗？',
          onOk: () => {
            this.$PnApi.ProjectApi.relieveDeveloper(this.projectData.id, user_id).then(result => {
              if (result.data.success) {
                this.loadDevelopers(this.projectData.id);
              }else {
                this.$Message.error(result.data.message)
              }
            })
          }
        });
      },

      addDeveloper () {
        let selection = this.$refs['userTable'].getSelection();
        if (selection.length == 0) {
          this.$Message.warning('未选择用户')
        }else {
          let ids = [];
          selection.forEach(item => {
            ids.push(item.id)
          })
          let existDevelops = [];
          this.developers.forEach(developer => {
            if (ids.indexOf(developer.user_id) > -1) {
              existDevelops.push(developer.username)
            }
          })
          if (existDevelops.length > 0) {
            this.$Message.warning({
              content: '所选用户'+existDevelops.toString()+'已存在于协同开发者名单中',
              duration: 5
            })
          }
          if (ids.indexOf(this.projectData.userid) > -1) {
            this.$Message.warning({
              content: '不能添加自己为协同开发者',
              duration: 5
            })
          }
          this.$PnApi.ProjectApi.addDeveloper(this.projectData.id, ids.toString()).then(result => {
            if (result.data.success) {
              this.loadDevelopers(this.projectData.id);
              this.$refs['userTable'].selectAll(false);
            }else {
              this.$Message.error(result.data.message)
            }
          })
        }
      },

      cancel () {
        this.visible = false;
        this.$emit('cancel', this.visible)
      },
      visibleChange (val) {
        if (!val) {
          this.visible = false;
          this.$emit('cancel', this.visible)
        }
      },
    },
    watch: {
      show (val) {
        this.visible = val
      }
    }
  }
</script>

<style scoped>

</style>
